import { useCallback, useState } from "react";
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import styles from "./index.module.scss";
import image1 from './assets/image_1.png';
import image2 from "./assets/image_2.png";
import image3 from "./assets/image_3.png";
import image34 from "./assets/image_34.png";
import image36 from "./assets/image_36.png";
import image37 from "./assets/image_37.png";
import image38 from "./assets/image_38.png";
import image43 from "./assets/image_43.png";
import image39 from "./assets/image_39.png";
import image40 from "./assets/image_40.png";
import image42 from "./assets/image_42.png";
import image44 from "./assets/image_44.png";
import image45 from "./assets/image_45.png";
import image46 from "./assets/image_46.png";
import image47 from "./assets/image_47.png";
import image48 from "./assets/image_48.png";
import screen1Right from './assets/screen1-right.png';

export default function HomePage() {
  const [grayscale, setGrayscale] = useState(false);
  const { t, i18n } = useTranslation();
  const lng = i18n.language;

  const handleChangeToGrayscale = useCallback(
    () => {
      setGrayscale(!grayscale);
    },
    [grayscale]
  );

  return (
    <div className={styles.page}>
      <div className={classnames(styles.wrap, grayscale && styles.gary_wrap)}>
        <div className={styles.container}>
          <div className={styles.content}>
            <div className={styles.main}>
              <div className={styles.section}>
                <img
                  src={image1}
                  className={styles.image}
                />
                <div className={classnames(styles.text, lng === 'en' && styles.text_en)}>
                  {t('看见差异，重构')}<span className={styles.text__seg1}>{t('视界')}</span>
                  <div>{t('看见差异，重构视界')}</div>
                </div>
                <div className={styles.subSection}>
                  <div className={styles.text1}>
                    <div className={styles.text1__linebreak}>
                      <span className={styles.text1__seg0}>
                        {t('每12位男性中1人、每200位女性中1人，正经历着你未曾想象的色彩维度。')}
                      </span>
                    </div>
                    <div>
                      <span className={styles.text1__seg0}>
                        {t('「错位色觉」搭建视觉平权的认知桥梁。')}
                      </span>
                    </div>
                  </div>
                </div>
                <div className={styles.subSection1}>
                  <div className={styles.block}>
                    <div className={styles.subBlock}>
                      <div className={styles.div} onClick={handleChangeToGrayscale}>
                        <div className={styles.text2}>
                          {grayscale ? t('回到彩色模式') : t('色觉差异者眼中的世界')}
                        </div>
                        <img
                          src={image2}
                          className={styles.image1}
                        />
                      </div>
                    </div>
                    <div className={styles.subBlock1}>
                      <div className={styles.div1}>
                        <Link to="/connect-us">
                          <div className={styles.text3}>{t('联系我们')}</div>
                        </Link>
                        <Link to="/connect-us">
                          <img
                            src={image3}
                            className={styles.image2}
                          />
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.main1}>
          <div className={styles.section1}>
            <img src={screen1Right} alt="" className={styles.screen1_right_img} />
          </div>
        </div>
      </div>

      <div className={styles.wrap1}>
        <div className={styles.container1}>
          <div className={styles.content1}>
            <div className={styles.main2}>
              <div className={styles.text4}>{t('「错位色觉」价值体系')}</div>
              <div className={classnames(styles.text5, lng === 'en' && styles.text5_en)}>
                {t('将科学精神、社会行动与哲学思考熔铸为品牌基因')}
              </div>
            </div>
          </div>
          <div className={styles.content2}>
            <div className={styles.main3}>
              <div className={styles.section2}>
                <div className={styles.subSection5}>
                  <div className={classnames(styles.block4, lng === 'en' && styles.block4_en)}></div>
                  <div className={styles.block5}>
                    <div className={styles.subBlock10}>
                      <div className={styles.div9}>
                        <div className={classnames(styles.div10, lng === 'en' && styles.div10_en)}>
                          <div className={styles.text6}>
                            <span className={styles.text6__seg0}>{t('视界平权')}</span>
                          </div>
                          {lng === 'zh' && (
                            <div className={styles.text7}>Vision&nbsp;Equity</div>
                          )}
                        </div>
                      </div>
                      <div className={classnames(styles.div11, lng === 'en' && styles.div11_en)}>
                        <div className={classnames(styles.text8, lng === 'en' && styles.text8_en)}>
                          {t('主张所有视觉体验的平等价值，通过技术干预与人文叙事重构「正常」的定义，创造无阶层差异的感知生态。')}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.section2}>
                <div className={styles.subSection5}>
                  <div className={classnames(styles.block4, lng === 'en' && styles.block4_en)}></div>
                  <div className={styles.block5}>
                    <div className={styles.subBlock10}>
                      <div className={styles.div9}>
                        <div className={classnames(styles.div10, lng === 'en' && styles.div10_en)}>
                          <div className={styles.text6}>
                            <span className={styles.text6__seg0}>{t('光谱理性')}</span>
                          </div>
                          {lng === 'zh' && (
                            <div className={styles.text7}>Vision&nbsp;Equity</div>
                          )}
                        </div>
                      </div>
                      <div className={classnames(styles.div11, lng === 'en' && styles.div11_en)}>
                        <div className={classnames(styles.text8, lng === 'en' && styles.text8_en)}>
                          {t('以科学解构视觉认知的复杂性，用可验证的数据与前沿研究搭建普适性认知框架，消解色觉差异的误解与偏见。')}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.section2}>
                <div className={styles.subSection5}>
                  <div className={classnames(styles.block4, lng === 'en' && styles.block4_en)}></div>
                  <div className={styles.block5}>
                    <div className={styles.subBlock10}>
                      <div className={styles.div9}>
                        <div className={classnames(styles.div10, lng === 'en' && styles.div10_en)}>
                          <div className={styles.text6}>
                            <span className={styles.text6__seg0}>{t('共生包容')}</span>
                          </div>
                          {lng === 'zh' && (
                            <div className={styles.text7}>Vision&nbsp;Equity</div>
                          )}
                        </div>
                      </div>
                      <div className={classnames(styles.div11, lng === 'en' && styles.div11_en)}>
                        <div className={classnames(styles.text8, lng === 'en' && styles.text8_en)}>
                          {t('超越简单的接纳逻辑，构建色觉差异者与常规视觉群体的双向赋能体系，在差异碰撞中催生新的创造力范式。')}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.wrap2}>
        <div className={styles.container2}>
          <div className={styles.content3}>
            <div className={styles.main4}>
              <img
                src={image34}
                className={styles.image33}
              />
              <div className={styles.text15}>{t('从视网膜到现实')}</div>
              <div className={styles.text16}>
                <div className={styles.text16__linebreak}>
                  {t('从视网膜视锥细胞的工作原理，到色盲色弱的科学分类')}
                </div>
                <div>{t('收录6大高频疑问权威解答，揭开色觉矫正的真相与可能')}</div>
              </div>
              <div className={styles.section5}>
                <Link to="/knowledge/encyclopedia">
                  <div className={styles.subSection8}>
                    <div className={styles.text17}>{t('前往知识科普')}</div>
                    <img
                      src={image3}
                      className={styles.image34}
                    />
                  </div>
                </Link>
              </div>
            </div>
          </div>
          <div className={styles.content4}>
            <div className={styles.main5}>
              <div className={styles.section6}></div>
              <img
                src={image36}
                className={styles.image35}
              />
              <img
                src={image37}
                className={styles.image36}
              />
            </div>
          </div>
        </div>
      </div>

      <div className={styles.wrap3}>
        <div className={styles.section7}></div>
        <div className={styles.container3}>
          <div className={styles.content5}>
            <div className={styles.main6}>
              <img
                src={image38}
                className={styles.image37}
              />
              <img
                src={image39}
                className={styles.image38}
              />
            </div>
          </div>
          <div className={styles.content6}>
            <div className={styles.main7}>
              <img
                src={image40}
                className={styles.image39}
              />
              <div className={styles.text18}>{t('辨色测试')}</div>
              <div className={styles.text19}>
                {t('60秒专业测试生成视觉能力图谱，匿名数据直接助力色觉研究。')}
              </div>
              <div className={styles.section8}>
                <Link to="/vision-test">
                  <div className={styles.subSection9}>
                    <div className={styles.text20}>{t('前往测试')}</div>
                    <img
                      src={image2}
                      className={styles.image40}
                    />
                  </div>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.wrap4}>
        <div className={styles.container4}>
          <div className={styles.content7}>
            <div className={styles.main8}>
              <img
                src={image42}
                className={styles.image41}
              />
              <div className={styles.text21}>{t('全球色觉专家')}</div>
              <div className={styles.text22}>
                {t('直连色觉色异联合体30+权威专家，支持紧急医疗咨询通道及辅助工具资源库。')}
              </div>
              <div className={styles.section9}>
                <Link to="/knowledge/encyclopedia">
                  <div className={styles.subSection10}>
                    <div className={styles.text23}>{t('前往专家支持')}</div>
                    <img
                      src={image43}
                      className={styles.image42}
                    />
                  </div>
                </Link>
              </div>
            </div>
          </div>
          <div className={styles.content8}>
            <div className={styles.main9}>
              <div className={styles.section10}></div>
              <img
                src={image44}
                className={styles.image43}
              />
              <img
                src={image45}
                className={styles.image44}
              />
            </div>
          </div>
        </div>
      </div>

      <div className={styles.wrap5}>
        <div className={styles.section11}></div>
        <div className={styles.container5}>
          <div className={styles.content9}>
            <div className={styles.main10}>
              <img
                src={image46}
                className={styles.image45}
              />
              <img
                src={image47}
                className={styles.image46}
              />
            </div>
          </div>
          <div className={classnames(styles.content10, lng === 'en' && styles.content10_en)}>
            <div className={styles.main11}>
              <img
                src={image48}
                className={styles.image47}
              />
              <div className={styles.text24}>{t('校园色彩行动')}</div>
              <div className={styles.text25}>
                {t('见证12所高校发起的认知平权运动')}
              </div>
              <Link to="/project">
                <div className={styles.section12}>
                  <div className={styles.subSection11}>
                    <div className={styles.text26}>{t('项目介绍2')}</div>
                    <img
                      src={image2}
                      className={styles.image48}
                    />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
